<script setup>
import { ref } from 'vue'
import TimeLine from '@/views/logistics/components/TimeLine.vue'
import PageFooter from '@/components/PageFooter.vue'
import Recommend from '@/components/Recommend.vue'

const drawer = ref(false)
const openDrawer = () => {
  drawer.value = !drawer.value
}
const magnification = ref(1)
const logisticsData = [
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '              <span style="color: #6AAD0E">您的快件已到达 <span\n' +
      '                style="color: #CA927B">[河北省石家庄新乐市]</span></span>',
    isActive: true
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的快件离开 <span style="color: #CA927B">[石家庄转运中心]</span>，已发往 <span style="color: #CA927B">[河北省石家庄新乐市]</span></span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的快件已经到达 <span style="color: #CA927B">[石家庄转运中心]</span>，已发往 <span style="color: #CA927B">[河北省石家庄新乐市]</span></span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的快件离开 <span style="color: #CA927B">[石家庄转运中心]</span>，已发往 <span style="color: #CA927B">[河北省石家庄新乐市]</span></span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的快件已到达 <span style="color: #CA927B">[揭阳转运中心]</span>，已发往 <span style="color: #CA927B">[石家庄转运中心]</span></span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的快件离开 <span style="color: #CA927B">[广东省揭阳市普宁西]</span>发往 <span style="color: #CA927B">[揭阳转运中心]</span></span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的快件被 <span style="color: #CA927B">[广东省揭阳市普宁西]</span>揽收人: 庄伟庆(13600112239)</span></span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">商家已发货，正在通知圆通快递取件</span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的订单已打包完成</span></span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的订单已验货完成</span>',
    isActive: false
  },
  {
    time: {
      date: '2024-03-20',
      time: '12:00:38'
    },
    message: '<span style="color: #6C6C6C">您的订单开始拣货您的订单开始拣货</span>',
    isActive: false
  }
]
const fruitList = ref([
  {
    name: '猕猴桃',
    img: '/src/static/logistics/9.png',
    desc: '含有丰富的维生素C、氨基酸和多种矿物质'
  },
  {
    name: '葡萄',
    img: '/src/static/logistics/10.png',
    desc: '含有矿物质钙、钾、磷、铁以及多种维生素B1'
  },
  {
    name: '蓝莓',
    img: '/src/static/logistics/11.png',
    desc: '含有丰富的果胶物质、SOD、英酮等'
  },
  {
    name: '青桔',
    img: '/src/static/logistics/12.png',
    desc: '含有类苯丙醇、吖啶酮和甘油糠脂'
  }
])
</script>

<template>
  <div class="container">
    <div :class="{show:drawer}" class="drawer">
      <div v-if="drawer" class="cart">
        <div v-for="(item,index) in 4" :key="item" class="cart-item">
          <div class="left">
            <div style="width: 100%;background-color:#fff;flex: 4">
              <img :src="`/src/static/logistics/${index+1}.png`" alt="" height="80px" style="" width="100%">
              <div style="font-size: 8px;transform: translateY(-5px)">菜园子 精选严选优品 新鲜水果</div>
            </div>
            <div
              style="background-color:#DFE5E6;width: 100%;font-size: 12px;display: flex;justify-content: center;align-items: center;flex: 1">
              预计11.29号送到(今天)
            </div>
          </div>
          <div class="right">
            <div style="background-color:#FCB413;flex: 3;display: flex;align-items: center;text-align: center">派送中
            </div>
            <div style="background: #EDE8CE;flex: 2;display: flex;align-items: center;text-align: center">未出</div>
          </div>
        </div>
      </div>
      <div class="drawer-btn" @click="openDrawer">查看快递</div>
      <div class="open" @click="openDrawer">
        <el-icon :style="{transform:drawer?'rotate(180deg)':''}">
          <DArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="main">
      <img height="380px" src="/src/static/logistics/5.png" style="transform: translate(60px,18%)" width="1000px">
    </div>
    <div class="time">
      <img class="title-img" src="/src/static/logistics/6.png" width="180px">
      <div class="map">
        <div style="width: 100%;height: 100%;overflow: hidden">
          <img :style="{transform:'scale('+magnification+')'}" height="100%" src="/src/static/logistics/7.png"
               width="100%" @click="magnification+=0.1" @mouseenter="magnification=1.2" @mouseleave="magnification=1">
        </div>
        <img src="/src/static/logistics/8.png" style="position: absolute;bottom: 0;right: 0;transform: translate(50%,30%)"  width="200px">
      </div>
      <div class="timeline">
        <div v-for="(item,index) in logisticsData" :key="index" class="timeline-item">
          <TimeLine :is-active="item.isActive" :is-show-arrow="index===0" :time="item.time">
            <template v-slot:message>
              <div v-html="item.message"></div>
            </template>
          </TimeLine>
        </div>
      </div>
    </div>
    <Recommend :color="'#45648D'" :fruit-list="fruitList" :title="'生鲜水果'"></Recommend>
    <PageFooter></PageFooter>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;

  .drawer {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    width: 80px;
    height: 140px;
    background-color: $fruit-main-color;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    transition: all ease-in-out 0.25s;
    gap: 10px;

    .cart {
      height: 120px;
      display: flex;
      gap: 20px;

      &-item {
        display: flex;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;

        .left {
          height: 100%;
          width: 85%;
          text-align: center;
          display: flex;
          flex-direction: column;
        }

        .right {
          width: 15%;
          height: 100%;
          text-align: center;
          display: flex;
          flex-direction: column;
        }
      }
    }

    .open {
      transition: all 0.25s ease-in-out;
      display: flex;
      align-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(50%, -50%);
      color: #ffffff;

      &:hover {
        background-color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        color: $fruit-main-color;
      }
    }

    &-btn {
      transition: all ease-in-out 0.1s;
      border-radius: 2px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      text-align: center;
      font-size: 13px;
      align-items: center;
      background-color: #2E6928;
      color: #ffffff;
      width: 24px;
      height: 120px;

      &:hover {
        transition: all ease-in-out 0.1s;
        background-color: #40833a;
      }
    }
  }

  .show {
    justify-content: space-around;
    width: 60%;
    transition: all 0.2s ease-in-out;
  }

  .main {
    margin-top: 30px;
    width: 100%;
    background-color: #DDCBAE;
    height: 405px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 10px;
    margin-bottom: 100px;
  }

  .time {
    padding: 80px 0;
    width: 100%;
    border-top: solid 2px #6C6C6C;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .title-img {
      position: absolute;
      z-index: 9;
      top: 0;
      left: 0;
      transform: translateY(-95%);
    }

    .map {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 450px;
      height: 700px;
      border: 5px dashed #DECAAC;
      transition: all 0.2s ease-in-out;
      position: relative;

      img {
        transition: all 0.2s ease-in-out;

        &:hover {
          transition: all 0.2s ease-in-out;
          transform: scale(1.3); /* 点击时放大到1.2倍 */
        }
      }
    }

    .timeline {
      width: 600px;
      height: 700px;
      background-color: #E0E5E4;
      padding-top: 50px;
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 15px;

      &-item {
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>